<template>
	<view class="wrapper-order">
		<!-- 管理员订单管理 -->
		<view class="tp">
			<view class="item search-c flex">
				<label class="label">搜索</label>
				<view class="label-content s-inpu">
					<input class="input" type="text" placeholder="按订单号/客户名称等关键字" placeholder-class="hover-style" v-model.trim="searchValue" cursor='10' confirm-type="search" @confirm='search'>
				</view>
			</view>
			<view class="item select-t flex">
				<label class="label">类型</label>
				<view class="label-content">
					<xfl-select
					:list="list"
					:clearable="true"
					:showItemNum="5" 
					:isCanInput="false"  
					:style_Container="listBoxStyle"
					@change = "selectChange"
					@clear = 'clear'
					>
					</xfl-select>
				</view>
			</view>
		</view>
		<view class="order-lists">
			<view class="order-header flex">
				<view class="num">订单编号</view>
				<view class="status">状态</view>
				<view class="date">日期</view>
			</view>
			<scroll-view scroll-y="true">
				<view class="order-item  flex flex-center" v-for="(item,index) in orderLists" :key='index' @click="goDetail(item.id)">
					<view class="num flex">{{item.orderNo}}<uni-icons style="margin-left: 6rpx;" type="daifu" size="14" color="rgba(52,120,247,.8)"></uni-icons></view>
					<view class="status" :class="{dsh:item.status == 0,ysh:item.status == 2,yfh:item.status == 6,yqx:item.status == 8}">{{item.status | orderStatus }}</view>
					<view class="date">{{item.orderDate}}</view>
				</view>
			</scroll-view>
		</view>	
	</view>
</template>

<script>
	import xflSelect from '../../components/select/xfl-select.vue'
	import uniIcons from '@/components/uni-icon/uni-icon.vue'
	import Request from '@/request/request.js'
	export default{
		components:{
			xflSelect,
			uniIcons
		},
		data(){
			return{
				list:["全部","待审核","已审核","已发货","已取消"],
				listBoxStyle:`height: 70rpx; font-size: 12px;width:100%`,
				orderLists:[],
				searchValue:'',//输入框搜索条件
				status:'',//订单状态 0 待审核 2 已审核 6 已发货 8 已取消
			}
		},
		created() {
			this.getOrderList()
		},
		filters:{
			orderStatus(status){
				let str = '待审核'
				switch(status){
					case '0':
						str = '待审核'
						break;
					case '2':
						str = '已审核'
						break;
					case '6':
						str = '已发货'
						break;
					case '8':
						str = '已取消'
						break;
				}
				return str
			}
		},
		methods:{
			search(e){
				this.getOrderList();
			},
			selectChange(e){
				switch(e.orignItem){
					case '待审核':
						this.status = 0
						break;
					case '已审核':
						this.status = 2
						break;
					case '已发货':
						this.status = 6
						break;
					case '已取消':
						this.status = 8
						break;
					default:
					        this.status = '';
				}
				this.getOrderList();	
			},
			clear(){
				this.status = ''
				this.getOrderList();
			},
			getOrderList(){
				Request({url:'order/list',data:{searchValue:this.searchValue,status:this.status}})
				.then(res =>{
					if(res.code == 0){
						this.orderLists = res.rows
					}
					
				}).catch(err => {})
			},
			goDetail(id){
				console.log(id)
				// return
				uni.navigateTo({
					url:`../orderDetail/orderDetail?orderId=${id}`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	@borderBottom:#C8C7CC;
	.wrapper-order{
		height: 100%;
		width: 100%;
		.tp{
			padding-top: 1rpx;
			.item{
				
				padding: 0 80rpx;
				margin-top: 20rpx;
				height: 80rpx;
				align-items: center;
				.label{
					width: 70rpx;
				}
				.label-content{
					flex: 1;
					&.s-inpu{
						height: 70rpx;
						display: flex;
						align-items: center;
						border: 1px solid #c0c4cc;
						padding-left: 20rpx;
						background-color: #FFFFFF;
						font-size: 24rpx;
						border-radius: 12rpx;
					}
					
					input{
						width: 100%;
					}
				}
			}
		}
		.order-lists{
			height: calc(100% - 224rpx);
			margin-top: 20rpx;
			background-color: #FFFFFF;
			.order-header{
				height: 80rpx;
				padding: 0 20rpx;
				border-bottom: 2rpx solid #C8C7CC;
				align-items: center;
				text-align: center;
				.num{
					width: 320rpx;
				}
				.status{
					width: 160rpx;
				}
				.date{
					flex:1;
				}
			}
			scroll-view{
				height: calc(100% - 78rpx);
				// background-color: red;
				.order-item{
					height: 100rpx;
					border-bottom: 2rpx solid @borderBottom;
					padding: 0 20rpx;
					text-align: center;
					.num{
						width: 320rpx;
					}
					.status{
						width: 160rpx;
						// color: #FB4949;
						&.subs{
							color: #4EA65A;
						}
						&.dsh{
						    color: rgb(255, 0, 0);
						}
						&.ysh{
							color: rgb(255, 184, 0);
						}
						&.yfh{
							color: rgb(95, 184, 120);
						}
						&.yqx{
							
						}
					}
					.date{
						flex:1;
					}
				}
			}
			
		}
	}
</style>
